<template>
    <div>
        <!-- 数据表格区域 -->
        <el-table :data="userList" :header-cell-style="cellStyle" style="width: 100%;margin-bottom: 20px;" row-key="id"
            border>
            <el-table-column prop="id" label="数据编号" sortable width="180">
            </el-table-column>
            <el-table-column prop="username" label="管理员名称" sortable width="180">
            </el-table-column>
            <el-table-column prop="rolename" label="管理员角色" sortable width="180">
            </el-table-column>
            <el-table-column label="管理员状态">
                <template slot-scope="scope">
                    <el-button size="mini" plain :type="scope.row.status == 1 ? 'success' : 'primary'">{{
                        scope.row.status
                            == 1 ? '启用' : '禁用'
                    }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页器区域 -->
        <el-pagination 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :page-sizes="[1, 2, 3, 4]"
            :page-size="params.size" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="params.total"
            :current-page="params.page"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    props: ['userList', 'params'],
    data() {
        return {
            cellStyle: { background: '#FF6040', color: 'white', height: '50px' }
        };
    },
    mounted() {

    },
    methods: {
        // 监听切换查询条数
        handleSizeChange(nowSize) {
            console.group('我是开始')//分组开始
            // console.log(nowSize)
            console.groupEnd()//分组结束
            // 通知父亲修改查询条数重新查询数据
            this.params.size = nowSize
            this.params.page = 1
            this.$emit('getUserData')
        },
        // 监听切换页码
        handleCurrentChange(nowPage) {
            console.group('我是开始')//分组开始
            // console.log(nowPage)
            console.groupEnd()//分组结束
            // 通知父亲修改查询条数重新查询数据
            this.params.page = nowPage
            this.$emit('getUserData')
        },
        handleEdit(index, row) {
            // 通知父亲修改数据（子传父）==>form修改数据（父传子）
            // this.$emit('edit', { index: index, row: row })

            // 兄弟通信
            this.$BUS.$emit('edit', { index, row })
        },
        handleDelete(index, row) {
            // 通知父亲修改数据（子传父）
            this.$emit('remove', { index, row })
        }
    },
};
</script>

<style scoped>

</style>
